<template>
	<view>
		<uni-popup ref="popup" type="center" class="notiveWrap">
			<m-image class="noticeTop" src="../../static/images/default/notice.png"></m-image>
			<m-block radius="20" gap="50" class="popupBox">
				<view class="_title text-center mb-48 fs30 otp2">
					{{title}}
				</view>
				<view class="_content fs26 pb-40" v-html="content">

				</view>
			</m-block>
			<view class="_close" @click="$refs.popup.close()">
				<m-icon type="icon-quxiao" size="42" color="#fff"></m-icon>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "m-tips",
		data() {
			return {

			};
		},
		props: {
			title: {
				type: String,
				default: () => {
					return "提示"
				}
			},
			content: {
				type: String,
				default: () => {
					return ""
				}
			}
		},
		methods: {
			openUp() {
				this.$refs.popup.open()
			}
		},
	}
</script>

<style lang="scss">
	.notiveWrap{
		::v-deep .uni-popup__wrapper{
			position: absolute;
			top:45%;
			transform: translateY(-50%);
		}
	}
	.popupBox {
		background: #fff;
		position: relative;
		overflow: auto;
		min-height: 400rpx;
		max-height: 45vh;
	}

	::v-deep.uni-popup .uni-popup__wrapper {
		width: 600rpx !important;
	}

	.squern {
		width: 26rpx;
		height: 26rpx;
		background: #00FFD4;
		border-radius: 5rpx;
	}

	._close {
		position: absolute;
		bottom: -30rpx;
		left: 50%;
		transform: translate(-50%);
	}

	._content {
	
		::v-deep img {
			margin: 16rpx 0rpx;
			width: 100%;
		}
	}

	.noticeTop {
		background-color: #fff;
		display: block;
		width: 100%;
		position: relative;
		z-index: 999;
		top: 10px;
		height: 230rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
</style>